<script setup>
import { onMounted, ref, watch } from "vue";
import { getCarListApi } from "@/service/db.js"

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => ([])
    }
})

const emit = defineEmits(['update:modelValue'])

const carList = ref([])

// 监控modelValue的变化
watch(() => props.modelValue, (newVal) => {
    carList.value = newVal
})

// 婚车类型选项
const carTypes = [
    { label: '主车', value: 'main' },
    { label: '跟车', value: 'follow' }
]

// 获取婚车列表
const carOptions = ref([])
const getCarList = () => {
    getCarListApi().then(({ data }) => {
        carOptions.value = data
    })
}

// 添加婚车
const appendCar = () => {
    carList.value.push({
        type: '',
        product_id: '',
        count: 1,
        usage: '',
        usage_type: 'time', // time 或 distance
        remark: ''
    })
}

// 删除婚车
const removeCar = (index) => {
    carList.value.splice(index, 1)
}

// 删除所有婚车
const removeAllCars = () => {
    carList.value = []
}

// 上移
const moveUp = (row) => {
    const index = carList.value.indexOf(row)
    if (index > 0) {
        [carList.value[index], carList.value[index - 1]] = [carList.value[index - 1], carList.value[index]]
    }
}

// 下移
const moveDown = (row) => {
    const index = carList.value.indexOf(row)
    if (index < carList.value.length - 1) {
        [carList.value[index], carList.value[index + 1]] = [carList.value[index + 1], carList.value[index]]
    }
}

// 确定
const handleConfirm = () => {
    emit('update:modelValue', carList.value)
}

onMounted(() => {
    getCarList()
})
</script>

<template>
    <div class="car-list">
        <div class="car-header">
            <el-button type="primary" @click="appendCar">添加婚车</el-button>
            <el-button type="danger" @click="removeAllCars">删除所有</el-button>
            <el-button type="warning" @click="handleConfirm">确定</el-button>
        </div>
        <el-table :data="carList" border>
            <el-table-column label="婚车类型">
                <template #default="{ row }">
                    <el-select v-model="row.type" placeholder="请选择类型" clearable filterable>
                        <el-option v-for="item in carTypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column label="选择婚车">
                <template #default="{ row }">
                    <el-select v-model="row.product_id" placeholder="请选择婚车" clearable filterable>
                        <el-option v-for="item in carOptions" :key="item.id" :label="item.title" :value="item.id" />
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column label="使用数量">
                <template #default="{ row }">
                    <el-input-number v-model="row.count" :min="1" :max="10" />
                </template>
            </el-table-column>
            <el-table-column label="使用方式">
                <template #default="{ row }">
                    <el-select v-model="row.usage_type" placeholder="请选择">
                        <el-option label="时间" value="time" />
                        <el-option label="公里数" value="distance" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="使用量">
                <template #default="{ row }">
                    <el-input-number v-model="row.usage" :min="0"
                        :placeholder="row.usage_type === 'time' ? '小时' : '公里'" />
                </template>
            </el-table-column>
            <el-table-column label="备注">
                <template #default="{ row }">
                    <el-input v-model="row.remark" placeholder="请输入备注" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" icon="ArrowUp" circle @click="moveUp(row)"/>
                    <el-button type="primary" icon="ArrowDown" circle @click="moveDown(row)"/>
                    <el-button type="danger" icon="Minus" circle @click="removeCar(row)"/>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.car-list {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
}

.car-header {
    margin-bottom: 10px;
}
</style>
